import { useSelector } from 'react-redux'
import './index.scss'
export default function Person({ text, index = 0 }) {
    const { colors2 } = useSelector(state => state.toggelStyle)
    const name = text ? text : ''
    const avatars = name.split(',').map((item, i) => {
        return {
            text: item.substring(0, 1),
            colorF: colors2[i % colors2.length + index]
        }
    })
    return (
        <div className="person">
            {avatars.map((item, index) => index < 2 && <span key={index} style={{
                backgroundColor: item.colorF
            }} className="avatar">{item.text}</span>)}
            <i title={name}>{name.split(',').splice(0, 2).join('、')}</i>
            {name.split(',').length > 2 && <i>+</i>}
            {!name && <i>-</i>}
        </div>
    )
}
